<template>
    <div class="main-header">


        <div class="header-content">

            <el-menu
                    class=""
                    mode="horizontal"
            >

                <el-menu-item  > <a class="ZhihuLogoLink" >
                    <svg viewBox="0 0 200 91"
                         fill="#0084FF"
                         width="64px" height="30px"><path d="M53.29 80.035l7.32.002 2.41 8.24 13.128-8.24h15.477v-67.98H53.29v67.978zm7.79-60.598h22.756v53.22h-8.73l-8.718 5.473-1.587-5.46-3.72-.012v-53.22zM46.818 43.162h-16.35c.545-8.467.687-16.12.687-22.955h15.987s.615-7.05-2.68-6.97H16.807c1.09-4.1 2.46-8.332 4.1-12.708 0 0-7.523 0-10.085 6.74-1.06 2.78-4.128 13.48-9.592 24.41 1.84-.2 7.927-.37 11.512-6.94.66-1.84.785-2.08 1.605-4.54h9.02c0 3.28-.374 20.9-.526 22.95H6.51c-3.67 0-4.863 7.38-4.863 7.38H22.14C20.765 66.11 13.385 79.24 0 89.62c6.403 1.828 12.784-.29 15.937-3.094 0 0 7.182-6.53 11.12-21.64L43.92 85.18s2.473-8.402-.388-12.496c-2.37-2.788-8.768-10.33-11.496-13.064l-4.57 3.627c1.363-4.368 2.183-8.61 2.46-12.71H49.19s-.027-7.38-2.372-7.38zm128.752-.502c6.51-8.013 14.054-18.302 14.054-18.302s-5.827-4.625-8.556-1.27c-1.874 2.548-11.51 15.063-11.51 15.063l6.012 4.51zm-46.903-18.462c-2.814-2.577-8.096.667-8.096.667s12.35 17.2 12.85 17.953l6.08-4.29s-8.02-11.752-10.83-14.33zM199.99 46.5c-6.18 0-40.908.292-40.953.292v-31.56c1.503 0 3.882-.124 7.14-.376 12.773-.753 21.914-1.25 27.427-1.504 0 0 3.817-8.496-.185-10.45-.96-.37-7.24 1.43-7.24 1.43s-51.63 5.153-72.61 5.64c.5 2.756 2.38 5.336 4.93 6.11 4.16 1.087 7.09.53 15.36.277 7.76-.5 13.65-.76 17.66-.76v31.19h-41.71s.88 6.97 7.97 7.14h33.73v22.16c0 4.364-3.498 6.87-7.65 6.6-4.4.034-8.15-.36-13.027-.566.623 1.24 1.977 4.496 6.035 6.824 3.087 1.502 5.054 2.053 8.13 2.053 9.237 0 14.27-5.4 14.027-14.16V53.93h38.235c3.026 0 2.72-7.432 2.72-7.432z" fill-rule="evenodd"></path></svg></a></el-menu-item>

                <el-menu-item index="1" class="item" @click="handleHome">首页</el-menu-item>
                <el-menu-item index="2" class="item" @click="handleFound">发现</el-menu-item>
                <el-menu-item  index="3" class="item" @click="handleques()">等你来答</el-menu-item>
                  <el-input size="" class="shurukuang" placeholder="请输入内容" v-model="keywords">

                      <el-button slot="append" icon="el-icon-search"></el-button>
                  </el-input>

                <el-button size="small" type="primary" class="question">提问</el-button>
<!--                <div class="login-button" >-->
<!--                    <a href="">  <router-link :to="{name:'Login'}">登录</router-link></a>-->
<!--                </div>-->

                <div class="header-right">
                    <i class="el-icon-message-solid"></i>
                    <i class="el-icon-s-comment"></i>

                    <el-dropdown trigger="click" placement="bottom" class="">
                        <span class="tan"><img src="../assets/touxiang.jpg"class="img-touxiang"></span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>
                                <div @click="handleMypage">
                                    <span class="xiala">
                                        <i class="el-icon-user-solid"></i>
                                        我的主页</span>

                                </div>
                            </el-dropdown-item>
                            <el-dropdown-item>
                                <div @click="handlegocenter">
                                    <span class="xiala">
                                        <i class="el-icon-user-solid"></i>
                                        创作中心</span>

                                </div>
                            </el-dropdown-item>
                            <el-dropdown-item>
                                <div @click="handleSeting">
                                    <span class="xiala">
                                          <i class="el-icon-s-tools"></i>
                                        设置</span>

                                </div>
                            </el-dropdown-item>
                            <el-dropdown-item>
                                <div @click="">
                                    <span class="xiala">
                                          <i class="el-icon-switch-button"></i>
                                        退出</span>

                                </div>
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
            </el-menu>
        </div>
    </div>
</template>

<script>
    export default {
        name: "MainHeader",
        data(){
            return{
                keywords:"",
                isLogin:true
            };
        },
        methods:{
            handleFound(){
                this.$router.push('/Found')
            },
            handleHome(){
                this.$router.push('/Home')
            },
            handleSeting(){
                this.$router.push('/Collection')
            },
            handleMypage(){
                this.$router.push('/Mypage')
            },

            handleques(){
                // this.$router.push({ name:'Quest'})
                this.$router.push({path:'/quest'})
            },
            handlegocenter(){
                this.$router.push({name:'CreativeCenter'})
           }
        }



    }
</script>

<style scoped>
    .main-header{

       top: 0;
        width: 100%;
        position: fixed;
        z-index: 111;
    }


    .ZhihuLogoLink{
        color: inherit;
        text-decoration: none;
        display: inline-block;
        margin-bottom: 2px;
        margin-left: 240px;
    }


    .shurukuang{
        margin-top: 10px;
        width:400px;
    }
    .question{
        margin-left: 20px;
    }
    /*.login-button{*/
    /*    display: inline-block;*/
    /*    margin-left: 30px;*/
    /*    font-size: 13px;*/

    /*}*/
    .login-button a{
        color: #999999;
    }
    .header-right{
        float: right;
        margin-right: 100px;


        width: 300px;
        height: 30px;
        box-sizing: border-box;
        padding-bottom: 10px;
        border: none;
        outline: none;
    }
    .header-right i{
        display: inline-block;
        margin-left: 20px;
        font-size: 18px;
        color: grey;

    }
    .tan{
        display: inline-block;
        margin-left: 20px;
        width: 40px;
        margin-top: 10px;
    }
    .img-touxiang{
        width: 40px;
        height: 40px;
    }
    .xiala{
        font-size: 13px;
    }

</style>
